<template>
    <div class="my">
        <van-row class="top" @click="openModal">
            <van-col span="6">
                <img :src="token ? img2 : img1" alt="">
            </van-col>
            <!-- <van-col span="16" class="zi">{{token ? a :name  }}</van-col> -->
                <van-col span="16" class="zi" v-if="token" >{{  name  }}</van-col>
                <van-col span="16" class="zi" v-else >请登录</van-col>
            <van-col span="2" class="icon">
                <van-icon v-if="token" @click="tui" name="cross" />
                <van-icon v-else name="arrow" />
            </van-col>
        </van-row>

        <van-grid :column-num="3" square>
            <van-grid-item icon="label-o" text="我的订单" />
            <van-grid-item icon="comment-circle-o" text="地址管理" />
            <van-grid-item icon="refund-o" text="优惠券" />
            <van-grid-item icon="point-gift-o" text="礼品卡" />
            <van-grid-item icon="star-o" text="我的收藏" />
            <van-grid-item icon="thumb-circle-o" text="我的足迹" />
            <van-grid-item icon="medal-o" text="会员福利" />
            <van-grid-item icon="info-o" text="账号安全" />
            <van-grid-item icon="service-o" text="联系客服" />
            <van-grid-item icon="question-o" text="帮助中心" />
            <van-grid-item icon="wap-home-o" text="意见反馈" />
        </van-grid>

        <!-- 登录窗口显示与隐藏 -->
        <transition name="van-fade">
            <div class="login-modal" v-show="isShowModal">
                <div class="hezi" @click="isShowModal = !isShowModal"></div>
                <van-form @submit="onSubmit" class="login-form">
                    <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]" />
                    <van-field v-model="pwd" type="password" name="密码" label="密码" placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />
                    <div style="margin: 16px;">
                        <van-button round block type="info" native-type="submit">立即登录</van-button>
                    </div>
                </van-form>
            </div>
        </transition>
    </div>
</template>

<script>
import { Login } from '@/http/api'
import { Dialog } from 'vant'
export default {

  data () {
    return {
      a: '请登录',
      name: '',
      username: '',
      pwd: '',
      isShowModal: false,
      userInfo: '',
      img1: 'https://img1.baidu.com/it/u=3174710853,3449144300&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501',
      img2: 'https://img.zcool.cn/community/013c875df24a1da801219cce17fe87.jpg@1280w_1l_2o_100sh.jpg',
      token: ''
    }
  },
  methods: {
    async onSubmit () {
      const res = await Login({ username: '123', pwd: '123' })
      this.$toast.success('登录成功')
      // 成功后 把tokenh和userInfo 保存，1s后关闭，随后userInfo信息填写到页面
      window.sessionStorage.setItem('token', res.data.data.token)
      window.sessionStorage.setItem('userInfo', JSON.stringify(res.data.data.userInfo))
      window.sessionStorage.setItem('name', res.data.data.userInfo.nickname)
      this.token = window.sessionStorage.setItem('token', res.data.data.token)
      this.name = window.sessionStorage.getItem('name')
      this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      this.isShowModal = !this.isShowModal
      this.nickname = res.data.data.userInfo.nickname
      location.reload()
    },
    openModal () {
      const token = window.sessionStorage.getItem('token')
      // 登录就return，没有登录就isShowModal取反
      if (token) {

      } else {
        this.isShowModal = !this.isShowModal
      }
    },
    tui () {
      Dialog.confirm({
        message: '你是否确认退出当前账号？'
      })
        .then(() => {
          sessionStorage.removeItem('token')
          sessionStorage.removeItem('userInfo')
          sessionStorage.removeItem('name')
          this.userInfo = null
          location.reload()
        })
        .catch(() => {

        })
    }
  },
  created () {
    // 组件刚创建时,判断用户有没有登录
    const token = sessionStorage.getItem('token')
    //    console.log(token);
    if (token) {
      this.name = window.sessionStorage.getItem('name')
      const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      this.nickname = userInfo.nickname
      this.token = sessionStorage.getItem('token')
      console.log(this.nickname)
    }
  }

}
</script>

<style scoped lang="scss">
.login-modal {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;

    .login-form {
        width: 90%;
        background-color: #fff;
        padding-bottom: 15px;
        position: absolute;
        left: 50%;
        top: 60%;
        margin-left: -45%;
        margin-top: -45%;
    }

    .hezi {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .5);
    }
}

.top {
    // width: 100%;
    height: 80px;
    background-color: rgb(56, 56, 56);
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        width: 70px;
        height: 70px;
        margin-right: 15px;
        border-radius: 50%;
    }

    .zi {
        font-size: 18px;
        color: #fff;
    }

    .icon {
        color: #fff;
    }
}
</style>
